<!--
  ~
  ~
  ~ MIT License
  ~
  ~ Copyright (c) 2021 gngpp
  ~
  ~ Permission is hereby granted, free of charge, to any person obtaining a copy
  ~ of this software and associated documentation files (the "Software"), to deal
  ~ in the Software without restriction, including without limitation the rights
  ~ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  ~ copies of the Software, and to permit persons to whom the Software is
  ~ furnished to do so, subject to the following conditions:
  ~
  ~ The above copyright notice and this permission notice shall be included in all
  ~ copies or substantial portions of the Software.
  ~
  ~ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  ~ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  ~ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  ~ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  ~ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  ~ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  ~ SOFTWARE.
  -->

<!--suppress ALL -->

<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon"
          href=""
          type="image/x-icon">
    <title>VERTX-DDNS</title>

    <!--JS-->
    <script src="/js/jquery-3.0.0.slim.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <!-- CSS -->
    <link href="/css/bootstrap.css" rel="stylesheet">
    <link href="/css/common.css" rel="stylesheet">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="/js/bootstrap.js"></script>
    <!--    Axios-->
    <script src="/js/axios.min.js"></script>
    <!--    RSA-->
    <script src="/js/jsencrypt.js"></script>
    <!--    AES-->
    <script src="/js/aes.js"></script>
    <!--    SockJS-->
    <script src="/js/sockjs.min.js"></script>
    <!--    Markdown-->
    <script src="/js/showdown.min.js"></script>
    <!--    ANSI Color Log-->
    <script src="/js/ansi_up.js"></script>
    <style>
        .markdown-body {
            box-sizing: border-box;
            min-width: 0px;
            max-width: 980px;
            margin: 0 auto;
            padding: 5px;
        }

        @media (max-width: 767px) {
            .markdown-body {
                padding: 5px;
            }
            container-body {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-right: 100px;
            }
        }
    </style>
</head>

<body>
<header>
  <div class="navbar navbar-dark bg-light shadow-sm" style="background-color: #e3f2fd;">
    <div class="container d-flex justify-content-between">
        <div>
            <a class="navbar-brand d-flex align-items-center" href="https://github.com/gngpp/vertx-ddns" target="blank">
                <img alt="Vert.x Logo" class="img-fluid" src="" style="" title="">
                <strong style="color: #000000">DDNS</strong>
            </a>
        </div>
        <div class="btn-group align-items-center">
            <button type="button"  class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
                    <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
                </svg>
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" onclick="logout()">登出</a>
            </div>
        </div>
    </div>
  </div>
</header>
<main role="main" style="margin-top: 20px; overflow: hidden">
    <div class="row">
      <div class="col-md-6 offset-md-3">
          <div class="card shadow-sm">
              <div class="fs-6 card-header">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cursor-fill" viewBox="0 0 16 16">
                      <path d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z"/>
                  </svg>
                  DDNS服务配置
              </div>
<!--            DNS服务商Body-->
          <div class="card-body">
            <ul class="nav nav-pills" id="DDNSul">
              <li class="nav-item" onclick="setAliyunType()">
                <a class="nav-link active" data-toggle="tab" href="#aliyun">Alidns(阿里云)</a>
              </li>
              <li class="nav-item" onclick="setDnspodType()">
                <a class="nav-link" data-toggle="tab" href="#dnspod">Dnspod(腾讯云)</a>
              </li>
              <li class="nav-item" onclick="setCloudflareType()">
                <a class="nav-link" data-toggle="tab" href="#cloudflare">Cloudflare</a>
              </li>
              <li class="nav-item" onclick="setHuaweiType()">
                <a class="nav-link" data-toggle="tab" href="#huawei">华为云</a>
              </li>
            </ul>
            <!-- DDNS服务商选项卡对应内容 -->
            <div class="tab-content" id="tab-content">
<!--              阿里云选项卡-->
              <div class="tab-pane active container" id="aliyun">
                  <form style="margin-top: 10px; ">
                      <small class="form-text text-muted" id="aliyunDns_help" style="margin-top: 5px">
                          <a href="https://ram.console.aliyun.com/manage/ak?spm=5176.12818093.nav-right.dak.488716d0mHaMgg" target="_blank">创建 AccessKey</a>
                      </small>
                      <div class="input-group mb-1" style="margin-top: 5px">
                          <span class="input-group-text" id="basic-addon1">AccessKey ID</span>
                          <input id="aliyunAccount" aria-describedby="basic-addon1" aria-label="AccessKey ID" class="form-control" placeholder="AccessKey ID" type="text">
                      </div>
                      <div class="input-group mb-1" style="margin-top: 5px">
                          <span class="input-group-text" id="basic-addon2">AccessKey Secret</span>
                          <input id="aliyunSecret" aria-describedby="basic-addon2" aria-label="AccessKey Secret" class="form-control" placeholder="AccessKey Secret" type="text">
                      </div>
                  </form>
              </div>
<!--              腾讯云选项卡-->
              <div class="tab-pane fade container" id="dnspod">
                  <form style="margin-top: 10px">
                      <small class="form-text text-muted" id="dnspod_help" style="margin-top: 5px">
                          <a href="https://console.dnspod.cn/account/token" target="_blank">创建密钥</a>
                      </small>
                      <div class="input-group mb-1" style="margin-top: 5px">
                          <span class="input-group-text" id="basic-addon3">ID</span>
                          <input id="dnspodAccount" aria-describedby="basic-addon3" aria-label="ID" class="form-control" placeholder="ID" type="text">
                      </div>
                      <div class="input-group mb-1" style="margin-top: 5px">
                          <span class="input-group-text" id="basic-addon4">Token</span>
                          <input id="dnspodSecret" aria-describedby="basic-addon4" aria-label="Token" class="form-control" placeholder="Token" type="text">
                      </div>
                  </form>
              </div>
<!--                CloudFlare选项卡-->
              <div class="tab-pane fade container" id="cloudflare">
                  <form style="margin-top: 10px">
                      <small class="form-text text-muted" id="cloudflareDns_help" style="margin-top: 5px">
                          <a href="https://dash.cloudflare.com/profile/api-tokens" target="_blank">创建令牌-&gt;编辑区域 DNS(使用模板)</a>
                      </small>
                      <div class="input-group mb-1" style="margin-top: 5px">
                          <span class="input-group-text" id="basic-addon5">Token</span>
                          <input id="cloudflareSecret" aria-describedby="basic-addon5" aria-label="Token" class="form-control" placeholder="Token" type="text">
                      </div>
                  </form>
              </div>
<!--                华为云选项卡-->
              <div class="tab-pane fade container" id="huawei">
                  <form style="margin-top: 10px">
                      <small class="form-text text-muted" id="huaweiDns_help" style="margin-top: 5px">
                          <a href="https://console.huaweicloud.com/iam/?locale=zh-cn#/mine/accessKey" target="_blank">新增访问密钥</a>
                      </small>
                      <div class="input-group mb-1" style="margin-top: 5px">
                          <span class="input-group-text" id="basic-addon6">Access Key Id</span>
                          <input id="huaweiAccount" aria-describedby="basic-addon6" aria-label="Access Key Id" class="form-control" placeholder="Access Key Id" type="text">
                      </div>
                      <div class="input-group mb-1" style="margin-top: 5px">
                          <span class="input-group-text" id="basic-addon7">Secret Access Key</span>
                          <input id="huaweiSecret" aria-describedby="basic-addon7" aria-label="Secret Access Key" class="form-control" placeholder="Secret Access Key" type="text">
                      </div>
                  </form>
              </div>
            </div>
          </div>
              <!--            IP类型Body-->
              <div class="card-body">
                  <ul class="nav nav-pills" id="IpType">
                      <li class="nav-item" onclick="setIpv4RecordType()">
                          <a class="nav-link active" data-toggle="tab" href="#ipv4">Ipv4</a>
                      </li>
                      <li class="nav-item" onclick="setIpv6RecordType()">
                          <a class="nav-link" data-toggle="tab" href="#ipv6">Ipv6</a>
                      </li>
                  </ul>
                  <!-- ip类型选项卡对应内容 -->
                  <div class="tab-content" id="ip-tab">
                      <!--              ipv4选项卡-->
                      <div class="tab-pane active container " id="ipv4">
                          <div style="margin-top: 10px">
                              <form>
                                  <fieldset class="row mb-1">
                                      <legend class="col-form-label col-sm-2 pt-0">启用</legend>
                                      <div class="col-sm-10">
                                          <div class="form-check form-check-inline">
                                              <label for="ipv4Enable"></label><input class="form-check-input" type="checkbox" id="ipv4Enable" >
                                          </div>
                                      </div>
                                  </fieldset>
                                  <fieldset class="row mb-1">
                                      <legend class="col-form-label col-sm-2 pt-0">获取IP方式</legend>
                                      <div class="col-sm-10" >
                                          <div class="form-check">
                                              <input class="form-check-input" onclick="selectIpv4ForApi()" type="radio" name="ipv4Radios" id="ipv4Radios1" value="true" checked>
                                              <label class="form-check-label" for="ipv4Radios1">
                                                  通过接口获取
                                              </label>
                                          </div>
                                          <div class="form-check">
                                              <input class="form-check-input" onclick="selectIpv4vForNetwork()" type="radio" name="ipv4Radios" id="ipv4Radios2" value="false">
                                              <label class="form-check-label" for="ipv4Radios2">
                                                  通过网卡获取
                                              </label>
                                          </div>
                                          <div class="input-group mb-0" id="ipv4ApiInputDiv">
                                              <input class="form-control" id="ipv4ApiInput" placeholder="ipv4 接口"
                                                     style="width: 500px" type="text">
                                              <small
                                                      class="form-text text-muted"
                                                      th:text="${'填写的URL需返回公网IPv4地址,如：' + common.ipApiList[0] + '，' + common.ipApiList[1] + '，' + common.ipApiList[2] + '，' + common.ipApiList[3]}">
                                              </small>
                                          </div>
                                          <div class="form-select mb-0" id="ipv4_netInterface_select">
                                              <select id="selectIpv4Value" class="form-control" name="Ipv4NetInterface">请选择网卡</select>
                                              <small id="ipv4_url_help" class="form-text text-muted">通过网卡获取IP, 建议在多宽带的路由器中使用</small>
                                          </div>
                                      </div>
                                  </fieldset>
                                  <fieldset class="row mb">
                                      <legend class="col-form-label col-sm-2 pt-0">域名列表</legend>
                                      <div class="col-sm-10" >
                                          <label for="ipv4_domains"></label>
                                          <textarea class="form-control" id="ipv4_domains" placeholder="IPv4域名列表" name="Ipv4Domains" rows="3" aria-describedby="ipv4_domains_help"></textarea>
                                          <small id="ipv4_domains_help" class="form-text text-muted">一行一条记录，域名:IP，比如：www.baidu.com:1.1.1.1 (无自定义指向的ip则默认使用ip接口获取的ip或网卡获取的ip)</small>
                                      </div>
                                  </fieldset>
                              </form>
                          </div>
                      </div>
                      <!--              ipv6选项卡-->
                      <div class="tab-pane fade container" id="ipv6">
                          <div style="margin-top: 10px">
                              <form>
                                  <fieldset class="row mb-1">
                                      <legend class="col-form-label col-sm-2 pt-0">启用</legend>
                                      <div class="col-sm-10">
                                          <div class="form-check form-check-inline">
                                              <label for="ipv6Enable"></label><input class="form-check-input" type="checkbox" id="ipv6Enable">
                                          </div>
                                      </div>
                                  </fieldset>
                                  <fieldset class="row mb-1">
                                      <legend class="col-form-label col-sm-2 pt-0">获取IP方式</legend>
                                      <div class="col-sm-10" >
                                          <div class="form-check">
                                              <input class="form-check-input" onclick="selectIpv6ForApi()" type="radio" name="ipv6Radios" id="ipv6Radios1" value="true" checked>
                                              <label class="form-check-label" for="ipv6Radios1">
                                                  通过接口获取
                                              </label>
                                          </div>
                                          <div class="form-check">
                                              <input class="form-check-input" onclick="selectIpv6ForNetwork()" type="radio" name="ipv6Radios" id="ipv6Radios2" value="false">
                                              <label class="form-check-label" for="ipv6Radios2">
                                                  通过网卡获取
                                              </label>
                                          </div>
                                          <div class="input-group mb-0" id="ipv6ApiInputDiv">
                                              <input class="form-control" id="ipv6ApiInput" placeholder="ipv6 接口"
                                                     style="width: 500px" type="text">
                                              <small
                                                      class="form-text text-muted"
                                                      th:text="${'填写的URL需返回公网IPv6地址,如：' + common.ipApiList[4] + '，' + common.ipApiList[5] + '，' + common.ipApiList[6]}">
                                              </small>
                                          </div>
                                          <div class="form-select mb-0" id="ipv6_netInterface_select">
                                              <select id="selectIpv6Value" class="form-control" name="Ipv6NetInterface">请选择网卡</select>
                                              <small id="ipv4_url_help" class="form-text text-muted">通过网卡获取IP, 建议在多宽带的路由器中使用</small>
                                          </div>
                                      </div>
                                  </fieldset>
                                  <fieldset class="row mb">
                                      <legend class="col-form-label col-sm-2 pt-0">域名列表</legend>
                                      <div class="col-sm-10" >
                                          <label for="ipv6_domains"></label>
                                          <textarea class="form-control" id="ipv6_domains" placeholder="IPv6域名列表" name="Ipv6Domains" rows="3" aria-describedby="ipv6_domains_help"></textarea>
                                          <small id="ipv6_domains_help" class="form-text text-muted">一行一条记录，域名:IP，比如：www.baidu.com:ff03:0:0:0:0:0:0:c1 (无自定义指向的ip则默认使用ip接口获取的ip或网卡获取的ip)</small>
                                      </div>
                                  </fieldset>
                              </form>
                          </div>
                      </div>
                  </div>
              </div>
<!--            域名查询Body-->
            <div class="card-body p-3 rounded">
                <div class="input-group mb-1" style="margin-top: 5px;width: auto">

                    <span class="input-group-text" id="basic-addon8">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                        </svg>
                        &nbsp;DNS解析记录查询
                    </span>
                    <input aria-describedby="basic-addon8" style="width: 50px" id="inputDomain" aria-label="域名" class="form-control" onkeydown="findDnsRecords(event)" placeholder="Enter：请输入需要查询的域名" type="text">
                    <div class="input-group-append">
                        <button class="btn btn-primary submit_btn" onclick="clearTable()">清空</button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover" style="overflow: hidden">
                        <caption>DNS记录表</caption>
                        <thead>
                        <tr>
                            <th>记录ID</th>
                            <th>域名(主域名)</th>
                            <th>记录</th>
                            <th>指向IP</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="tbMain"></tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer">

                <div class="text-center">
                    <div>
                        <button class="btn btn-primary"
                                onclick="storeDDNSConfig()"
                                style="display: inline-block">
                            保存配置
                        </button>
                        <button class="btn btn-secondary"
                                data-toggle="tooltip"
                                onclick="resovleDnsRecord()"
                                style="display: inline-block"
                                title="发送请求，解析当前配置的域名记录列表"
                                type="button">
                            实时解析
                        </button>
                    </div>
                </div>
            </div>

          </div>
          <!--        Secure-->
          <div class="card shadow-sm" style="margin-top: 50px">
              <div class="fs-6 card-header">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-safe-fill" viewBox="0 0 16 16">
                      <path d="M9.778 9.414A2 2 0 1 1 6.95 6.586a2 2 0 0 1 2.828 2.828z"></path>
                      <path d="M2.5 0A1.5 1.5 0 0 0 1 1.5V3H.5a.5.5 0 0 0 0 1H1v3.5H.5a.5.5 0 0 0 0 1H1V12H.5a.5.5 0 0 0 0 1H1v1.5A1.5 1.5 0 0 0 2.5 16h12a1.5 1.5 0 0 0 1.5-1.5v-13A1.5 1.5 0 0 0 14.5 0h-12zm3.036 4.464 1.09 1.09a3.003 3.003 0 0 1 3.476 0l1.09-1.09a.5.5 0 1 1 .707.708l-1.09 1.09c.74 1.037.74 2.44 0 3.476l1.09 1.09a.5.5 0 1 1-.707.708l-1.09-1.09a3.002 3.002 0 0 1-3.476 0l-1.09 1.09a.5.5 0 1 1-.708-.708l1.09-1.09a3.003 3.003 0 0 1 0-3.476l-1.09-1.09a.5.5 0 1 1 .708-.708zM14 6.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 1 0z"></path>
                  </svg>
                  安全配置
              </div>
              <div class="card-body">
                <div class="p-3 rounded">
                    <form>
                        <fieldset class="row mb-1">
                            <legend class="col-form-label col-sm-2 pt-0">禁止公网访问</legend>
                            <div class="col-sm-10">
                                <div class="form-check form-check-inline">
                                    <label for="ipv4Enable"></label>
                                    <input class="form-check-input" type="checkbox" checked id="notAllowWanAccess" >
                                    <small id="ipv4_url_help" class="form-text text-muted">默认启用, 可禁止从公网访问本页面</small>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset class="row mb" style="margin-top: 15px">
                            <legend class="col-form-label col-sm-2 pt-0">登录用户名</legend>
                            <div class="col-sm-10">
                                <input class="form-control" name="username" id="username" style="width: 90%" aria-describedby="Username_help">
                                <small id="Username_help" class="form-text text-muted">为保护你的信息安全, 建议输入</small>
                            </div>
                        </fieldset>
                        <fieldset class="row mb" style="margin-top: 15px">
                            <legend class="col-form-label col-sm-2 pt-0">登录密码</legend>
                            <div class="col-sm-10">
                                <input class="form-control" type="password" style="width: 90%" name="password"
                                       id="password" aria-describedby="password_help">
                                <small id="password_help" class="form-text text-muted">为保护你的信息安全, 建议输入</small>
                            </div>
                        </fieldset>
                    </form>
                </div>
              </div>
              <div class="card-footer">
                  <button class="btn btn-primary submit_btn" style="display:block;margin:0 auto"
                          onclick="storeSecureConfig()">保存
                  </button>
              </div>
          </div>
          <!--          Webhook-->
          <div class="card shadow-sm" style="margin-top: 50px; margin-bottom: 50px">
              <div class="fs-6 card-header">
                  <svg class="bi bi-bug-fill" fill="currentColor" height="16" viewBox="0 0 16 16" width="16"
                       xmlns="http://www.w3.org/2000/svg">
                      <path d="M4.978.855a.5.5 0 1 0-.956.29l.41 1.352A4.985 4.985 0 0 0 3 6h10a4.985 4.985 0 0 0-1.432-3.503l.41-1.352a.5.5 0 1 0-.956-.29l-.291.956A4.978 4.978 0 0 0 8 1a4.979 4.979 0 0 0-2.731.811l-.29-.956z"/>
                      <path d="M13 6v1H8.5v8.975A5 5 0 0 0 13 11h.5a.5.5 0 0 1 .5.5v.5a.5.5 0 1 0 1 0v-.5a1.5 1.5 0 0 0-1.5-1.5H13V9h1.5a.5.5 0 0 0 0-1H13V7h.5A1.5 1.5 0 0 0 15 5.5V5a.5.5 0 0 0-1 0v.5a.5.5 0 0 1-.5.5H13zm-5.5 9.975V7H3V6h-.5a.5.5 0 0 1-.5-.5V5a.5.5 0 0 0-1 0v.5A1.5 1.5 0 0 0 2.5 7H3v1H1.5a.5.5 0 0 0 0 1H3v1h-.5A1.5 1.5 0 0 0 1 11.5v.5a.5.5 0 1 0 1 0v-.5a.5.5 0 0 1 .5-.5H3a5 5 0 0 0 4.5 4.975z"/>
                  </svg>
                  Webhook配置
              </div>
              <div class="card-body">
                  <!--                  Webhook导航-->
                  <div>
                      <ul class="nav nav-pills mb-3" id="webhook-tab" role="tablist">
                          <li class="nav-item" onclick="selectWebhookProvider('SERVER_J')" role="presentation">
                              <a aria-controls="pills-profile" aria-selected="false" class="nav-link active"
                                 data-toggle="pill"
                                 href="#server_j" id="pills-profile-tab" role="tab">Server酱</a>
                          </li>
                          <li class="nav-item" onclick="selectWebhookProvider('LARK')" role="presentation">
                              <a aria-controls="pills-home" aria-selected="true" class="nav-link"
                                 data-toggle="pill" href="#lark" id="pills-home-tab" role="tab">飞书（Lark）</a>
                          </li>
                          <li class="nav-item" onclick="selectWebhookProvider('DING_DING')" role="presentation">
                              <a aria-controls="pills-home" aria-selected="true" class="nav-link"
                                 data-toggle="pill" href="#dingding" id="pills-home-tab" role="tab">DingDing</a>
                          </li>

                      </ul>
                      <div class="tab-content" id="pills-tabContent">
                          <!--                          server酱-->
                          <div aria-labelledby="pills-profile-tab" class="tab-pane fade show active" id="server_j" role="tabpanel">
                              <div class="p-3 rounded">
                                  <form>
                                      <fieldset class="row mb-3">
                                          <legend class="col-form-label col-sm-2 pt-0">启用</legend>
                                          <div class="col-sm-10">
                                              <div class="form-check form-check-inline">
                                                  <label for="server_j_enabled"></label>
                                                  <input class="form-check-input" type="checkbox"  id="server_j_enabled" >
                                                  <small id="ipv4_url_help" class="form-text text-muted">默认关闭, 可在更改解析记录发送消息通知 </small>
                                              </div>
                                          </div>
                                      </fieldset>
                                      <fieldset class="row mb-3">
                                          <div>
                                              <a href="https://sct.ftqq.com/sendkey" target="_blank">获取Webhook URL</a>
                                          </div>
                                      </fieldset>
                                      <fieldset class="row mb mb-3">
                                          <div class="input-group">
                                              <div class="input-group-prepend">
                                                  <span class="input-group-text">URL</span>
                                              </div>
                                              <input class="form-control" id="server_j_url" placeholder="Webhook URL"
                                                     type="text">
                                              <span class="input-group-btn">
                                                  <button class="btn btn-secondary"
                                                          onclick="sendWebhookTest('SERVER_J')"
                                                          type="button">发送测试</button>
                                          </span>
                                          </div>
                                      </fieldset>
                                      <fieldset class="row mb">
                                          <div class="input-group mb-3">
                                              <div class="input-group-prepend">
                                                  <span class="input-group-text">标题</span>
                                              </div>
                                              <input class="form-control" id="server_j_title" placeholder="输入消息的标题" type="text"
                                                     value="">
                                          </div>
                                      </fieldset>
                                      <fieldset class="row mb">
                                          <div class="input-group">
                                              <textarea class="cur form-control" id="server_j_content"
                                                placeholder="输入消息内容，支持 Markdown。注意Markdown语法中两次回车才是换行。"
                                                style="height: 120px;"></textarea>
                                          </div>
                                          <div>
                                              <svg class="bi bi-book-half" fill="currentColor" height="16" viewBox="0 0 16 16"
                                                   width="16" xmlns="http://www.w3.org/2000/svg">
                                                  <path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
                                              </svg>
                                              <a href="https://commonmark.org/help/" target="_blank">Markdown 语法参考</a>
                                          </div>
                                      </fieldset>
                                  </form>
                              </div>
                              <div class="markdown-body" id="server_j_show"
                                   style="border-bottom: 1px solid #eee;margin-top: 10px; margin-bottom: 10px"></div>
                          </div>
                          <!--                          Lark-->
                          <div aria-labelledby="pills-profile-tab" class="tab-pane fade show" id="lark" role="tabpanel">
                              <div class="p-3 rounded">
                                  <form>
                                      <fieldset class="row mb-3">
                                          <legend class="col-form-label col-sm-2 pt-0">启用</legend>
                                          <div class="col-sm-10">
                                              <div class="form-check form-check-inline">
                                                  <label for="lark_enabled"></label>
                                                  <input class="form-check-input" type="checkbox" id="lark_enabled">
                                                  <small id="ipv4_url_help" class="form-text text-muted">默认关闭,
                                                      可在更改解析记录发送消息通知 </small>
                                              </div>
                                          </div>
                                      </fieldset>
                                      <fieldset class="row mb-3">
                                          <div>
                                              <a href="https://www.feishu.cn/hc/zh-CN/articles/360024984973"
                                                 target="_blank">获取Webhook URL，只勾选Webhook加签选项即可</a>
                                          </div>
                                      </fieldset>
                                      <fieldset class="row mb mb-3">
                                          <div class="input-group">
                                              <div class="input-group-prepend">
                                                  <span class="input-group-text">签名密钥</span>
                                              </div>
                                              <input class="form-control" id="lark_url_secret"
                                                     placeholder="勾选加签选项后，复制Secret"
                                                     type="text">
                                          </div>
                                      </fieldset>
                                      <fieldset class="row mb mb-3">
                                          <div class="input-group">
                                              <div class="input-group-prepend">
                                                  <span class="input-group-text">URL</span>
                                              </div>
                                              <input class="form-control" id="lark_url" placeholder="Webhook URL"
                                                     type="text">
                                              <span class="input-group-btn">
                                                  <button class="btn btn-secondary" onclick="sendWebhookTest('LARK')"
                                                          type="button">发送测试</button>
                                              </span>
                                          </div>
                                      </fieldset>
                                      <fieldset class="row mb">
                                          <div class="input-group">
                                              <textarea class="cur form-control" id="lark_content"
                                                        placeholder="输入消息内容"
                                                        style="height: 120px;"></textarea>
                                          </div>
                                      </fieldset>
                                  </form>
                              </div>
                          </div>
                          <!--                          webhook tabs-->
                          <div aria-labelledby="pills-home-tab" class="tab-pane fade" id="dingding"
                               role="tabpanel">
                              <div class="p-3 rounded">
                                  <form>
                                      <div class="mb-3">
                                          <div class="form-check form-check-inline">
                                              <input class="form-check-input" id="dingding_text_type"
                                                     name="dingding-model"
                                                     type="radio"
                                                     checked
                                                     onclick="selectDingDingMessageType('text')"
                                                     value="option1">
                                              <label class="form-check-label" for="dingding_text_type">Text消息</label>
                                          </div>
                                          <div class="form-check form-check-inline">
                                              <input class="form-check-input" id="dingding_link_type" name="dingding-model"
                                                     type="radio"
                                                     onclick="selectDingDingMessageType('link')"
                                                     value="option2">
                                              <label class="form-check-label" for="dingding_link_type">Link消息</label>
                                          </div>
                                          <div class="form-check form-check-inline">
                                              <input class="form-check-input" id="dingding_markdown_type" name="dingding-model"
                                                     onclick="selectDingDingMessageType('markdown')"
                                                     type="radio"
                                                     value="option3">
                                              <label class="form-check-label" for="dingding_markdown_type">Markdown消息</label>
                                          </div>
                                      </div>
                                      <fieldset class="row mb-3">
                                          <legend class="col-form-label col-sm-2 pt-0">启用</legend>
                                          <div class="col-sm-10">
                                              <div class="form-check form-check-inline">
                                                  <label for="dingding_enabled"></label>
                                                  <input class="form-check-input" type="checkbox" id="dingding_enabled">
                                                  <small class="form-text text-muted">默认关闭, 更改解析记录发送消息通知 </small>
                                              </div>
                                          </div>
                                      </fieldset>
                                      <fieldset class="row mb-3">
                                          <div>
                                              <a href="https://developers.dingtalk.com/document/robots/custom-robot-access"
                                                 target="_blank">获取Webhook URL，只勾选Webhook加签选项即可</a>
                                          </div>
                                      </fieldset>
                                      <fieldset class="row mb mb-3">
                                          <div class="input-group">
                                              <div class="input-group-prepend">
                                                  <span class="input-group-text">签名密钥</span>
                                              </div>
                                              <input class="form-control" id="dingding_url_secret"
                                                     placeholder="勾选加签选项后，复制Secret"
                                                     type="text">
                                          </div>
                                      </fieldset>
                                      <fieldset class="row mb mb-3">
                                          <div class="input-group">
                                              <div class="input-group-prepend">
                                                  <span class="input-group-text">URL</span>
                                              </div>
                                              <input class="form-control" id="dingding_url" placeholder="Webhook URL"
                                                     type="text">
                                              <span class="input-group-btn">
                                                  <button class="btn btn-secondary"
                                                          onclick="sendWebhookTest('DING_DING')"
                                                          type="button">发送测试</button>
                                              </span>
                                          </div>
                                      </fieldset>
                                      <fieldset class="row mb-3" id="dingding_text">
                                          <div class="input-group mb-3">
                                              <div class="input-group-prepend">
                                                  <span class="input-group-text">@用户的ID，请用","隔开</span>
                                              </div>
                                              <input class="form-control" id="dingding_text_atUserIds" placeholder="@用户ID"
                                                     type="text">
                                          </div>
                                          <div class="input-group mb-3">
                                              <div class="input-group-prepend">
                                                  <span class="input-group-text">@用户的手机号，请用","隔开</span>
                                              </div>
                                              <input class="form-control" id="dingding_text_atMobiles" placeholder="@用户手机号"
                                                     type="text">
                                          </div>
                                          <legend class="col-form-label col-sm-2 pt-0">@所有人</legend>
                                          <div class="col-sm-10">
                                              <div class="form-check form-check-inline">
                                                  <label for="dingding_enabled"></label>
                                                  <input class="form-check-input" type="checkbox"  id="dingding_text_isAtAll" >
                                                  <small class="form-text text-muted">默认关闭, 发送消息@所有人 </small>
                                              </div>
                                          </div>
                                          <div class="input-group">
                                              <textarea class="form-control" id="dingding_text_content" placeholder="文本内容"
                                                        style="height: 120px;"
                                                        type="text"></textarea>
                                          </div>
                                      </fieldset>
                                      <fieldset class="row mb-3" id="dingding_link">
                                          <div class="input-group mb-3">
                                              <div class="input-group-prepend">
                                                  <span class="input-group-text">链接标题</span>
                                              </div>
                                              <input class="form-control" id="dingding_link_title" placeholder="输入标题"
                                                     type="text">
                                          </div>
                                          <div class="input-group mb-3">
                                              <div class="input-group-prepend">
                                                  <span class="input-group-text">图片地址</span>
                                              </div>
                                              <input class="form-control" id="dingding_link_picUrl" placeholder="图片URL"
                                                     type="text">
                                          </div>
                                          <div class="input-group mb-3">
                                              <div class="input-group-prepend">
                                                  <span class="input-group-text">消息地址</span>
                                              </div>
                                              <input class="form-control" id="dingding_link_messageUrl"
                                                     placeholder="消息地址必须存在，否则将发送失败"
                                                     type="text">
                                          </div>
                                          <div class="input-group">
                                              <textarea class="form-control" id="dingding_link_text" placeholder="链接文本"
                                                        style="height: 120px;"
                                                        type="text"></textarea>
                                          </div>
                                      </fieldset>
                                      <fieldset class="row mb-3" id="dingding_markdown">
                                          <div class="input-group mb-3">
                                              <div class="input-group-prepend">
                                                  <span class="input-group-text">@用户的ID，请用","隔开</span>
                                              </div>
                                              <input class="form-control" id="dingding_markdown_atUserIds" placeholder="@用户ID"
                                                     type="text">
                                          </div>
                                          <div class="input-group mb-3">
                                              <div class="input-group-prepend">
                                                  <span class="input-group-text">@用户的手机号，请用","隔开</span>
                                              </div>
                                              <input class="form-control" id="dingding_markdown_atMobiles" placeholder="@用户手机号"
                                                     type="text">
                                          </div>
                                          <legend class="col-form-label col-sm-2 pt-0">@所有人</legend>
                                          <div class="col-sm-10">
                                              <div class="form-check form-check-inline">
                                                  <label for="dingding_enabled"></label>
                                                  <input class="form-check-input" type="checkbox"  id="dingding_markdown_isAtAll" >
                                                  <small class="form-text text-muted">默认关闭, 发送消息@所有人 </small>
                                              </div>
                                          </div>
                                          <div class="input-group mb-3">
                                              <div class="input-group-prepend">
                                                  <span class="input-group-text">标题</span>
                                              </div>
                                              <input class="form-control" id="dingding_markdown_title" placeholder="Markdown标题"
                                                     type="text">
                                          </div>
                                          <div class="input-group">
                                              <textarea class="cur form-control" id="dingding_markdown_text"
                                                        placeholder="输入消息内容，支持 Markdown。注意Markdown语法中两次回车才是换行。"
                                                        style="height: 120px;"></textarea>
                                          </div>
                                          <div>
                                              <svg class="bi bi-book-half" fill="currentColor" height="16" viewBox="0 0 16 16"
                                                   width="16" xmlns="http://www.w3.org/2000/svg">
                                                  <path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
                                              </svg>
                                              <a href="https://commonmark.org/help/" target="_blank">Markdown 语法参考</a>
                                          </div>
                                          <div class="markdown-body" id="dingding_markdown_show"
                                               style="border-bottom: 1px solid #eee;margin-top: 10px; margin-bottom: 10px"></div>
                                      </fieldset>
                                  </form>
                              </div>
                          </div>
                      </div>
                  </div>

              </div>
              <div class="card-footer">
                  <button class="btn btn-primary submit_btn" onclick="storeWebhookConfig()"
                          style="display:block;margin:0 auto">
                      保存Webhook配置
                  </button>
              </div>
          </div>
      </div>
        <!--        日志-->
        <div class="col-md-3">
            <div class="card shadow-sm">
                <div class="card-header fs-6">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-dots-fill" viewBox="0 0 16 16">
                        <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM5 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
                    </svg>
                    解析日志
                </div>
                <ul class="nav nav-tabs nav-fill" id="ddnsLogs">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" onclick="getLogs('ALIYUN')">Alidns</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" onclick="getLogs('DNSPOD')">Dnspod</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" onclick="getLogs('CLOUDFLARE')">Cloudflare</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" onclick="getLogs('HUAWEI')">Huawei</a>
                    </li>
                </ul>
                <div class="card-body">
                    <div class="row pre-scrollable" style="max-height: 800px"/>
                    <div class="list-group" id="logs"></div>
                </div>

                <div class="text-center" style="margin-top: 15px">
                    <button class="btn btn-warning " data-placement="top" data-toggle="tooltip" onclick="clearLogs()"
                            title="清空当前选项的解析记录日志">清空解析日志
                    </button>
                    <button class="btn btn-secondary" data-target="#staticBackdrop" data-toggle="modal"
                            type="button" onclick="selectSystemLogFileList()">
                        查看系统日志
                    </button>
                </div>
                <!-- Button trigger modal -->


                <!-- System Log Modal -->
                <div aria-hidden="true" aria-labelledby="staticBackdropLabel" class="modal fade" data-backdrop="static"
                     data-keyboard="false" id="staticBackdrop" tabindex="-1">
                    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="staticBackdropLabel">运行日志</h5>
                                <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <form class="form-inline">
                                                <label class="my-0 mr-2" for="logFile">日志文件</label>
                                                <select class="custom-select my-1 mr-sm-2" id="logFile" onchange="searchLog()">
                                                </select>
                                                &nbsp;&nbsp;
                                            </form>
                                            <div style="margin-bottom: 20px">
                                                <button class="btn btn-warning my-1" onclick="deleteLog()">删除日志文件</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="card">
                                                <h5 class="card-header">系统日志</h5>
                                                <div class="card-body" id="messageBox"
                                                     style="height:450px;overflow:scroll;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-primary" data-dismiss="modal" type="button">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</main>
<!--ServerJ Markdown JS-->
<script>
    let converter = new showdown.Converter(),
        container_edit = document.getElementById("server_j_content"),
        container_show = document.getElementById("server_j_show");

    // 将输入框中的 markdown 语句 转换为html 输出到 预览容器中
    let translation = (function () {
        return function () {
            container_show.innerHTML = converter.makeHtml(container_edit.value);
            // 按比例调整 预览容器 的滚动条位置
            let ratio = container_edit.scrollTop / container_edit.scrollHeight;
            container_show.scrollTop = container_show.scrollHeight * ratio;
        }
    })();

    // 监听输入框输入，实时将输入内容同步的右侧 预览框
    container_edit.onkeyup = translation;

    //监听鼠标进入 输入框范围 设置状态
    container_edit.onmouseover = function () {
        container_show.classList.remove('cur');
        container_edit.classList.add('cur');
    };
    //监听鼠标离开 输入框范围 设置状态
    container_edit.onmouseleave = function () {
        container_edit.classList.remove('cur')
    };
    //监听鼠标进入 预览容器范围 设置状态
    container_show.onmouseover = function () {
        container_edit.classList.remove('cur')
        container_show.classList.add('cur');
    };
    //监听鼠标离开 预览容器范围 设置状态
    container_show.onmouseleave = function () {
        container_show.classList.remove('cur')
    };

    // 监听 输入框 内容滚动
    container_edit.addEventListener('scroll', function () {
        // 若鼠标在 输入框范围内 则 以输入框为主 同步 预览容器内容滚动条高度
        if (hasClass(container_edit, "cur")) {
            let ratio = container_edit.scrollTop / container_edit.scrollHeight;
            container_show.scrollTop = container_show.scrollHeight * ratio;
        }
    });
    // 监听 预览容器 内容滚动
    container_show.addEventListener('scroll', function () {
        // 若鼠标在 预览范围内 则 以 预览容器为主 同步 输入框内容滚动条高度
        if (hasClass(container_show, "cur")) {
            let ratio = container_show.scrollTop / container_show.scrollHeight;
            container_edit.scrollTop = container_edit.scrollHeight * ratio;
        }
    });

    // 判断 dom对象是否含有 指定 class 属性
    var hasClass = (function () {
        var div = document.createElement("div");
        if ("classList" in div && typeof div.classList.contains === "function") {
            return function (elem, className) {
                return elem.classList.contains(className);
            };
        } else {
            return function (elem, className) {
                var classes = elem.className.split(/\s+/);
                for (var i = 0; i < classes.length; i++) {
                    if (classes[i] === className) return true;
                }
                return false;
            };
        }
    })();
</script>
<!--DingDing Markdown JS-->
<script>
    let dingdingConverter = new showdown.Converter(),
        dingdingContainer_edit = document.getElementById("dingding_markdown_text"),
        dingdingContainer_show = document.getElementById("dingding_markdown_show");

    // 将输入框中的 markdown 语句 转换为html 输出到 预览容器中
    let dingdingTranslation = (function () {
        return function () {
            dingdingContainer_show.innerHTML = dingdingConverter.makeHtml(dingdingContainer_edit.value);
            // 按比例调整 预览容器 的滚动条位置
            let ratio = dingdingContainer_edit.scrollTop / dingdingContainer_edit.scrollHeight;
            dingdingContainer_show.scrollTop = dingdingContainer_show.scrollHeight * ratio;
        }
    })();

    // 监听输入框输入，实时将输入内容同步的右侧 预览框
    dingdingContainer_edit.onkeyup = dingdingTranslation;

    //监听鼠标进入 输入框范围 设置状态
    dingdingContainer_edit.onmouseover = function () {
        dingdingContainer_show.classList.remove('cur');
        dingdingContainer_edit.classList.add('cur');
    };
    //监听鼠标离开 输入框范围 设置状态
    dingdingContainer_edit.onmouseleave = function () {
        dingdingContainer_edit.classList.remove('cur')
    };
    //监听鼠标进入 预览容器范围 设置状态
    dingdingContainer_show.onmouseover = function () {
        dingdingContainer_edit.classList.remove('cur')
        dingdingContainer_show.classList.add('cur');
    };
    //监听鼠标离开 预览容器范围 设置状态
    dingdingContainer_show.onmouseleave = function () {
        dingdingContainer_show.classList.remove('cur')
    };

    // 监听 输入框 内容滚动
    dingdingContainer_edit.addEventListener('scroll', function () {
        // 若鼠标在 输入框范围内 则 以输入框为主 同步 预览容器内容滚动条高度
        if (hasClass(dingdingContainer_edit, "cur")) {
            let ratio = dingdingContainer_edit.scrollTop / dingdingContainer_edit.scrollHeight;
            dingdingContainer_show.scrollTop = dingdingContainer_show.scrollHeight * ratio;
        }
    });
    // 监听 预览容器 内容滚动
    dingdingContainer_show.addEventListener('scroll', function () {
        // 若鼠标在 预览范围内 则 以 预览容器为主 同步 输入框内容滚动条高度
        if (hasClass(dingdingContainer_show, "cur")) {
            let ratio = dingdingContainer_show.scrollTop / dingdingContainer_show.scrollHeight;
            dingdingContainer_edit.scrollTop = dingdingContainer_edit.scrollHeight * ratio;
        }
    });

    // 判断 dom对象是否含有 指定 class 属性
    var hasClass = (function () {
        var div = document.createElement("div");
        if ("classList" in div && typeof div.classList.contains === "function") {
            return function (elem, className) {
                return elem.classList.contains(className);
            };
        } else {
            return function (elem, className) {
                var classes = elem.className.split(/\s+/);
                for (var i = 0; i < classes.length; i++) {
                    if (classes[i] === className) return true;
                }
                return false;
            };
        }
    })();
</script>

<script th:inline="javascript">

    const axiosInstance = axios.create();
    axiosInstance.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
    // 添加请求拦截器
    axiosInstance.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        return config;
    }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    });

    // 添加响应拦截器
    axiosInstance.interceptors.response.use(function (response) {
        // 对响应数据做点什么
        return response;
    }, function (error) {
        // 对响应错误做点什么
        confirm.show(error.response.data.errMsg)
        return Promise.reject(error);
    });

    const sock = new SockJS('/api/logs');
    let selectLogType = "ALIYUN"
    window.οnbefοreunlοad = function () {
        if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
            sock.close()
        } else {
            sock.close()
        }
    }
    // ansi color
    var ansi_up = new AnsiUp;
    // 保存的配置
    const dnsConfigList = [[${dnsConfigList}]]
    const aliyunType = "ALIYUN"
    const dnspodType = "DNSPOD"
    const cloudflareType = "CLOUDFLARE"
    const huaweiType = "HUAWEI"
    const ipv4RecordType = "A"
    const ipv6RecordType = "AAAA"
    const dingdingProviderType = "DING_DING"
    const serverJProviderType = "SERVER_J"
    const larkProviderType = "LARK"
    // 默认类型
    let selectDnsProviderType = aliyunType
    let selectDnsRecordType = ipv4RecordType
    let selectWebhookProviderType = serverJProviderType
    // 初始化调用
    selectIpv4ForApi()
    selectIpv6ForApi()
    setIpv4RecordType()
    setAliyunType()
    setSecureConfig()
    setWebhookConfig()
    initLogSockJs()
    selectDingDingMessageType('text')

    function deleteLog() {
        var logFileOptions = $('#logFile').children('option');
        console.log(logFileOptions.length)
        for (let index = 0; index < logFileOptions.length; index++) {
            var logFileOption = logFileOptions[index];
            if (logFileOption.selected) {
                axiosInstance.delete('/api/log?filename=' + logFileOption.value)
                    .then(res => {
                        selectSystemLogFileList()
                    })
            }
        }
    }

    function searchLog() {
        document.getElementById('messageBox').innerHTML = ''
        var logFileOptions = $('#logFile').children('option');
        for (let index = 0; index < logFileOptions.length; index++) {
            var logFileOption = logFileOptions[index];
            if (logFileOption.selected) {
                axiosInstance.post('/api/log?filename=' + logFileOption.value)
                    .then(res => {
                        var html = ansi_up.ansi_to_html(res.data);
                        $('#messageBox').append('<p style="white-space: pre-wrap" id="logHtml">' + html +'</p>')
                    })

            }
        }
    }

    function selectSystemLogFileList() {
        document.getElementById('logFile').innerHTML = ''
        axiosInstance.get("/api/log/list")
                    .then(res => {
                        let result = JSON.parse(res.data.data)
                        if (result) {
                            for (let i = 0; i < result.length; i++) {
                                var resultElement = result[i];
                                if (resultElement == 'app.log') {
                                    $('#logFile').append('<option selected>' + resultElement + '</option>');
                                } else {
                                    $('#logFile').append('<option>' + resultElement + '</option>');
                                }
                            }
                        }
                        searchLog()
                    })
    }

    function selectDingDingMessageType(type) {
        document.getElementById('dingding_enabled').checked =  false
        document.getElementById('dingding_url_secret').value = ""
        document.getElementById('dingding_url').value = ""
        let webhookConfig = [[${webhookConfig}]]
        let dingdingMessageList = webhookConfig.dingDingMessageList
        if (dingdingMessageList) {
            for (let i = 0; i < dingdingMessageList.length; i++) {
                let dingdingMessage = dingdingMessageList[i]
                if (dingdingMessage.msgtype == type) {
                    document.getElementById('dingding_enabled').checked = dingdingMessage.enabled? dingdingMessage.enabled : false
                    document.getElementById('dingding_url_secret').value = dingdingMessage.secret? dingdingMessage.secret : ""
                    document.getElementById('dingding_url').value = dingdingMessage.url? dingdingMessage.url : ""
                }
            }
        }
        if (type == 'text') {
            document.getElementById('dingding_text').hidden = false
            document.getElementById('dingding_link').hidden = true
            document.getElementById('dingding_markdown').hidden = true
        }

        if (type == 'link') {
            document.getElementById('dingding_text').hidden = true
            document.getElementById('dingding_link').hidden = false
            document.getElementById('dingding_markdown').hidden = true
        }

        if (type == 'markdown') {
            document.getElementById('dingding_text').hidden = true
            document.getElementById('dingding_link').hidden = true
            document.getElementById('dingding_markdown').hidden = false
        }
    }

    function setWebhookConfig() {
        let webhookConfig = [[${webhookConfig}]]
        let serverJMessage = webhookConfig.serverJMessage
        let dingdingMessageList = webhookConfig.dingDingMessageList
        let larkMessage = webhookConfig.larkMessage;

        if (larkMessage) {
            document.getElementById('lark_enabled').checked = larkMessage.enabled ? serverJMessage.enabled : false
            document.getElementById('lark_url').value = larkMessage.url ? larkMessage.url : ""
            document.getElementById('lark_url_secret').value = larkMessage.secret ? larkMessage.secret : ""
            document.getElementById('lark_content').value = larkMessage.content ? larkMessage.content.text ? larkMessage.content.text : "" : ""
        }

        if (serverJMessage) {
            document.getElementById('server_j_enabled').checked = serverJMessage.enabled ? serverJMessage.enabled : false
            document.getElementById('server_j_url').value = serverJMessage.url ? serverJMessage.url : ""
            document.getElementById('server_j_title').value = serverJMessage.title ? serverJMessage.title : ""
            document.getElementById('server_j_content').value = serverJMessage.content ? serverJMessage.content : ""
        }
        if (dingdingMessageList) {
            for (let i = 0; i < dingdingMessageList.length; i++) {
                let dingdingMessage = dingdingMessageList[i]
                if (dingdingMessage.msgtype == 'text') {
                    document.getElementById('dingding_text_isAtAll').checked = dingdingMessage.at.isAtAll? dingdingMessage.at.isAtAll.toString() : ""
                    document.getElementById('dingding_text_content').value = dingdingMessage.at.content? dingdingMessage.at.content : ""
                    document.getElementById('dingding_text_atMobiles').value = dingdingMessage.at.atMobiles? dingdingMessage.at.atMobiles.toString() : ""
                    document.getElementById('dingding_text_atUserIds').value = dingdingMessage.at.atUserIds? dingdingMessage.at.atUserIds.toString() : ""
                    document.getElementById('dingding_text_content').value = dingdingMessage.text.content? dingdingMessage.text.content : ""
                }
                if (dingdingMessage.msgtype == 'link') {
                    document.getElementById('dingding_link_title').value = dingdingMessage.link.title? dingdingMessage.link.title : ""
                    document.getElementById('dingding_link_picUrl').value = dingdingMessage.link.picUrl? dingdingMessage.link.picUrl : ""
                    document.getElementById('dingding_link_messageUrl').value = dingdingMessage.link.messageUrl? dingdingMessage.link.messageUrl : ""
                    document.getElementById('dingding_link_text').value = dingdingMessage.link.text? dingdingMessage.link.text : ""
                }
                if (dingdingMessage.msgtype == 'markdown') {
                    document.getElementById('dingding_markdown_isAtAll').checked = dingdingMessage.at.isAtAll? dingdingMessage.at.isAtAll.toString() : ""
                    document.getElementById('dingding_markdown_atMobiles').value = dingdingMessage.at.atMobiles? dingdingMessage.at.atMobiles.toString() : ""
                    document.getElementById('dingding_markdown_atUserIds').value = dingdingMessage.at.atUserIds? dingdingMessage.at.atUserIds.toString() : ""
                    document.getElementById('dingding_markdown_text').value = dingdingMessage.markdown.text? dingdingMessage.markdown.text : ""
                    document.getElementById('dingding_markdown_title').value = dingdingMessage.markdown.title? dingdingMessage.markdown.title : ""
                }
            }
        }

    }

    function storeWebhookConfig() {
        if (selectWebhookProviderType == serverJProviderType) {
            let title = document.getElementById('server_j_title').value
            let content = document.getElementById('server_j_content').value
            let url = document.getElementById('server_j_url').value
            let enabled = document.getElementById('server_j_enabled').checked
            const data = {
                "title": title,
                "content": content,
                "url": url ? encryptRSA(url) : "",
                "enabled": enabled
            }
            axiosInstance.post('/api/webhook/config?type=' + selectWebhookProviderType, data)
                .then(res => {
                    confirm.show('Webhook配置保存成功', function () {
                        window.location.reload()
                    })
                })
        }

        if (selectWebhookProviderType == larkProviderType) {
            var content = document.getElementById('lark_content').value
            var url = document.getElementById('lark_url').value
            var secret = document.getElementById('lark_url_secret').value
            var enabled = document.getElementById('lark_enabled').checked;
            const data = {
                "content": {
                    "text": content
                },
                "url": url ? encryptRSA(url) : "",
                "secret": secret ? encryptRSA(secret) : "",
                "enabled": enabled
            }

            axiosInstance.post('/api/webhook/config?type=' + selectWebhookProviderType, data)
                .then(res => {
                    confirm.show('Webhook配置保存成功', function () {
                        window.location.reload()
                    })
                })
        }

        if (selectWebhookProviderType == dingdingProviderType) {
            var linkChecked = document.getElementById('dingding_link_type').checked;
            var textChecked = document.getElementById('dingding_text_type').checked;
            var markdownChecked = document.getElementById('dingding_markdown_type').checked;
            var enabled = document.getElementById('dingding_enabled').checked
            var url = document.getElementById('dingding_url').value
            var secret = document.getElementById('dingding_url_secret').value
            if (linkChecked) {
                let data = {
                    "url": url ? encryptRSA(url) : "",
                    "secret": secret ? encryptRSA(secret) : "",
                    "enabled": enabled,
                    "link": {
                        "text": document.getElementById('dingding_link_text').value,
                        "title": document.getElementById('dingding_link_title').value,
                        "picUrl": document.getElementById('dingding_link_picUrl').value,
                        "messageUrl": document.getElementById('dingding_link_messageUrl').value
                    },
                    "msgtype": "link"
                }
                axiosInstance.post('/api/webhook/config?type=' + selectWebhookProviderType, data)
                    .then(res => {
                        confirm.show('Webhook配置保存成功', function () {
                            window.location.reload()
                        })
                    })
            }

            if (textChecked) {
                let data = {
                    "url": url ? encryptRSA(url) : "",
                    "secret": secret ? encryptRSA(secret) : "",
                    "enabled": enabled,
                    "at": {
                        "atMobiles": document.getElementById('dingding_text_atMobiles').value.split(','),
                        "atUserIds": document.getElementById('dingding_text_atUserIds').value.split(','),
                        "isAtAll": document.getElementById('dingding_text_isAtAll').checked
                    },
                    "text": {
                        "content": document.getElementById('dingding_text_content').value
                    },
                    "msgtype": "text"
                }
                axiosInstance.post('/api/webhook/config?type=' + selectWebhookProviderType, data)
                    .then(res => {
                        confirm.show('Webhook配置保存成功', function () {
                            window.location.reload()
                        })
                    })
            }

            if (markdownChecked) {
                let data = {
                    "url": url ? encryptRSA(url) : "",
                    "secret": secret ? encryptRSA(secret) : "",
                    "enabled": enabled,
                    "markdown": {
                        "title": document.getElementById('dingding_markdown_title').value,
                        "text": document.getElementById('dingding_markdown_text').value
                    },
                    "at": {
                        "atMobiles": document.getElementById('dingding_markdown_atMobiles').value.split(','),
                        "atUserIds": document.getElementById('dingding_markdown_atUserIds').value.split(','),
                        "isAtAll": document.getElementById('dingding_markdown_isAtAll').checked
                    },
                    "msgtype" : "markdown"
                }
                axiosInstance.post('/api/webhook/config?type=' + selectWebhookProviderType, data)
                    .then(res => {
                        confirm.show('Webhook配置保存成功', function () {
                            window.location.reload()
                        })
                    })
            }
        }
    }

    function selectWebhookProvider(providerType) {
        if (providerType == dingdingProviderType) {
            selectWebhookProviderType = dingdingProviderType;
        }
        if (providerType == serverJProviderType) {
            selectWebhookProviderType = serverJProviderType
        }
        if (providerType == larkProviderType) {
            selectWebhookProviderType = larkProviderType
        }
    }

    function sendWebhookTest(providerType) {
        if (providerType == serverJProviderType) {
            let title = document.getElementById('server_j_title').value
            if (title == '') {
                confirm.show("Title cannot be empty")
                return
            }
            let content = document.getElementById('server_j_content').value
            let url = document.getElementById('server_j_url').value
            let absUrl = url + "?title=" + encodeURI(title) + "&desp=" + encodeURI(content)
            axiosInstance.post("/api/webhook/test?url=" + encryptByCBC(absUrl) + "&type=" + selectWebhookProviderType)
                .then(res => {
                    confirm.show(res.data.data)
                })

        } else if (providerType == dingdingProviderType) {
            var linkChecked = document.getElementById('dingding_link_type').checked;
            var textChecked = document.getElementById('dingding_text_type').checked;
            var markdownChecked = document.getElementById('dingding_markdown_type').checked;
            var enabled = document.getElementById('dingding_enabled').checked
            var url = document.getElementById('dingding_url').value
            var secret = document.getElementById('dingding_url_secret').value
            if (linkChecked) {
                if (document.getElementById('dingding_link_messageUrl').value == "") {
                    confirm.show("The message address cannot be empty")
                    return
                }
                let data = {
                    "link": {
                        "text": document.getElementById('dingding_link_text').value,
                        "title": document.getElementById('dingding_link_title').value,
                        "picUrl": document.getElementById('dingding_link_picUrl').value,
                        "messageUrl": document.getElementById('dingding_link_messageUrl').value
                    },
                    "msgtype": "link"
                }
                axiosInstance.post('/api/webhook/test?type=' + selectWebhookProviderType + "&url=" + encryptByCBC(url) + "&secret=" + encryptByCBC(secret), data)
                    .then(res => {
                        confirm.show(res.data.data)
                    })
            }

            if (textChecked) {
                let data = {
                    "at": {
                        "atMobiles": document.getElementById('dingding_text_atMobiles').value.split(','),
                        "atUserIds": document.getElementById('dingding_text_atUserIds').value.split(','),
                        "isAtAll": document.getElementById('dingding_text_isAtAll').checked
                    },
                    "text": {
                        "content": document.getElementById('dingding_text_content').value
                    },
                    "msgtype": "text"
                }
                axiosInstance.post('/api/webhook/test?type=' + selectWebhookProviderType + "&url=" + encryptByCBC(url) + "&secret=" + encryptByCBC(secret), data)
                    .then(res => {
                        confirm.show(res.data.data)
                    })
            }

            if (markdownChecked) {
                let data = {
                    "markdown": {
                        "title": document.getElementById('dingding_markdown_title').value,
                        "text": document.getElementById('dingding_markdown_text').value
                    },
                    "at": {
                        "atMobiles": document.getElementById('dingding_markdown_atMobiles').value.split(','),
                        "atUserIds": document.getElementById('dingding_markdown_atUserIds').value.split(','),
                        "isAtAll": document.getElementById('dingding_markdown_isAtAll').checked
                    },
                    "msgtype": "markdown"
                }
                axiosInstance.post('/api/webhook/test?type=' + selectWebhookProviderType + "&url=" + encryptByCBC(url) + "&secret=" + encryptByCBC(secret), data)
                    .then(res => {
                        confirm.show(res.data.data)
                    })
            }
        } else if (providerType == larkProviderType) {
            var content = document.getElementById('lark_content').value;
            var url = document.getElementById('lark_url').value;
            var secret = document.getElementById('lark_url_secret').value;
            let data = {
                "content": {
                    "text": content
                }
            }
            axiosInstance.post("/api/webhook/test?type=" + selectWebhookProviderType + "&url=" + encryptByCBC(url) + "&secret=" + encryptByCBC(secret), data)
                .then(res => {
                    confirm.show(res.data.data)
                })
        }
    }

        /**
         * cbc模式
         * @param data
         **/
        function encryptByCBC(data) {
            let encrypted;
            var aesKey = [[${aesKey}]]
            var key = CryptoJS.enc.Utf8.parse(aesKey.key);
            var iv = CryptoJS.enc.Utf8.parse(aesKey.iv);
            if (typeof data == "string") {
                const srcs = CryptoJS.enc.Utf8.parse(data);
                encrypted = CryptoJS.AES.encrypt(srcs, key, {
                    iv: iv,
                    mode: CryptoJS.mode.CBC,
                    padding: CryptoJS.pad.Pkcs7
                });
            } else if (typeof data == "object") {
                //对象格式的转成json字符串
                const result = JSON.stringify(data);
                const srcs = CryptoJS.enc.Utf8.parse(result);
                encrypted = CryptoJS.AES.encrypt(srcs, key, {
                    iv: iv,
                    mode: CryptoJS.mode.CBC,
                    padding: CryptoJS.pad.Pkcs7
                });
            }
            return encrypted.ciphertext.toString()
        }

        // aes解密
        function decryptByCBC(data) {
            var aesKey = [[${aesKey}]]
            var key = CryptoJS.enc.Utf8.parse(aesKey.key);
            var iv = CryptoJS.enc.Utf8.parse(aesKey.iv);
            const encryptData = data
            const encryptedHexStr = CryptoJS.enc.Hex.parse(encryptData);
            const srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
            const content = CryptoJS.AES.decrypt(srcs, key, {
                iv: iv,
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7
            });
            const decryptedStr = content.toString(CryptoJS.enc.Utf8);
            return decryptedStr.toString();
        }

        function logout() {
            axiosInstance.post("/logout")
                .then(res => {
                    window.location.href = 'login.html';
                })
        }

        function clearLogs() {
            axiosInstance.delete("/api/dns/record/log?type=" + selectLogType)
                .then(res => {
                    confirm.show("当页日志已清除")
                    document.getElementById('logs').innerHTML = ''
                })
        }

        function setIpv4RecordType() {
            selectDnsRecordType = ipv4RecordType
        }

        function setIpv6RecordType() {
            selectDnsRecordType = ipv6RecordType
        }

        function setDnsConfig() {
            // 设置服务商Account
            let targetConfig
            if (dnsConfigList != undefined) {
                for (let i = 0; i < dnsConfigList.length; i++) {
                    let dnsConfig = dnsConfigList[i]
                    if (selectDnsProviderType == dnsConfig.dnsProviderType) {
                        targetConfig = dnsConfig
                        document.getElementById("ipv4Enable").checked = dnsConfig.ipv4Config.enable
                        document.getElementById("ipv6Enable").checked = dnsConfig.ipv6Config.enable
                        if (dnsConfig.ipv4Config.selectIpMethod) {
                            document.getElementById("ipv4Radios1").checked = true
                            document.getElementById("ipv4Radios2").checked = false
                            document.getElementById("ipv4Radios1").onclick()

                        } else {
                            document.getElementById("ipv4Radios1").checked = false
                            document.getElementById("ipv4Radios2").checked = true
                            document.getElementById("ipv4Radios2").onclick()
                        }

                        if (dnsConfig.ipv6Config.selectIpMethod) {
                            document.getElementById("ipv6Radios1").checked = true
                            document.getElementById("ipv6Radios2").checked = false
                            document.getElementById("ipv6Radios1").onclick()

                        } else {
                            document.getElementById("ipv6Radios1").checked = false
                            document.getElementById("ipv6Radios2").checked = true
                            document.getElementById("ipv6Radios2").onclick()
                        }
                        let ipv4Domain = ""
                        for (let j = 0; j < dnsConfig.ipv4Config.domainList.length; j++) {
                            ipv4Domain += dnsConfig.ipv4Config.domainList[j]
                            if ((j + 1) < dnsConfig.ipv4Config.domainList.length) {
                                ipv4Domain += "\n"
                            }
                        }
                        let ipv6Domain = ""
                        for (let j = 0; j < dnsConfig.ipv6Config.domainList.length; j++) {
                            ipv6Domain += dnsConfig.ipv6Config.domainList[j]
                            if ((j + 1) < dnsConfig.ipv6Config.domainList.length) {
                                ipv6Domain += "\n"
                            }
                        }
                        document.getElementById("ipv4ApiInput").value = dnsConfig.ipv4Config.inputIpApi
                        document.getElementById("ipv4_domains").value = ipv4Domain
                        document.getElementById("ipv6ApiInput").value = dnsConfig.ipv6Config.inputIpApi
                        document.getElementById("ipv6_domains").value = ipv6Domain
                    }
                    switch (selectDnsProviderType) {
                        case aliyunType:
                            document.getElementById("aliyunAccount").value = targetConfig ? targetConfig.id : ""
                            document.getElementById("aliyunSecret").value = targetConfig ? targetConfig.secret : ""
                            break
                        case dnspodType:
                            document.getElementById("dnspodAccount").value = targetConfig ? targetConfig.id : ""
                            document.getElementById("dnspodSecret").value = targetConfig ? targetConfig.secret : ""
                            break
                        case cloudflareType:
                            document.getElementById("cloudflareSecret").value = targetConfig ? targetConfig.secret : ""
                            break
                        case huaweiType:
                            document.getElementById("huaweiAccount").value = targetConfig ? targetConfig.id : ""
                            document.getElementById("huaweiSecret").value = targetConfig ? targetConfig.secret : ""
                            break
                        default:
                    }
                }
            }
        }

        function storeSecureConfig() {
            var notAllowWanAccess = document.getElementById("notAllowWanAccess").checked
            var username = document.getElementById("username").value
            var password = document.getElementById("password").value
            if (username == undefined || username == "") {
                confirm.show("username cannot been empty!")
                return
            }
            if (password == undefined || password == "") {
                confirm.show("password cannot been empty!")
                return
            }
            let secureConfig = {
                "notAllowWanAccess": notAllowWanAccess,
                "username": encryptRSA(username),
                "password": passwordIsHide(password) ? password : encryptRSA(password)
            }
            axiosInstance.post("/api/store/secure/config", secureConfig)
                .then(res => {
                    confirm.show("Saved successfully, you need to log in again!", function () {
                        location.reload()
                    })
                })
        }

        function passwordIsHide(password) {
            let secureConfig = [[${secureConfig}]]
            if (secureConfig == null || secureConfig == undefined) {
                return false
            }
            return secureConfig.password == password
        }

        function resovleDnsRecord() {
            axiosInstance.post("/api/dns/record/resolve")
                .then(res => {
                    confirm.show("请求已经发送，请查看日志观察结果")
                })
        }

        function storeDDNSConfig() {
            let ipv4Address
            let ipv6Address
            // 从Api获取Ipv4
            if (document.getElementsByName("ipv4Radios")[0].checked) {
                ipv4Address = document.getElementById("ipv4ApiInput").value
            } else {
                ipv4Address = document.getElementById("selectIpv4Value") ? document.getElementById("selectIpv4Value").value : null
            }

            // 从Api获取Ipv6
            if (document.getElementsByName("ipv6Radios")[0].checked) {
                ipv6Address = document.getElementById("ipv6ApiInput").value
            } else {
                ipv6Address = document.getElementById("selectIpv6Value") ? document.getElementById("selectIpv6Value").value : null
            }

            let ipv4Config = {
                "enable": document.getElementById("ipv4Enable").checked,
                "selectIpMethod": document.getElementsByName("ipv4Radios")[0].checked, // 第一个选择表示使用API获取ip 值为true
                "inputIpApi": document.getElementById("ipv4ApiInput").value,
                "card": ipv4Address ? ipv4Address.substring(0, ipv4Address.indexOf('(')) : null,
                "domainList": document.getElementById("ipv4_domains").value.split('\n')
            }

            let ipv6Config = {
                "enable": document.getElementById("ipv6Enable").checked,
                "selectIpMethod": document.getElementsByName("ipv6Radios")[0].checked, // 第一个选择表示使用API获取ip 值为true
                "inputIpApi": document.getElementById("ipv6ApiInput").value,
                "card": ipv6Address ? ipv6Address.substring(0, ipv6Address.indexOf('(')) : null,
                "domainList": document.getElementById("ipv6_domains").value.split('\n')
            }

            let id
            let secret
            switch (selectDnsProviderType) {
                case aliyunType:
                    id = document.getElementById("aliyunAccount").value;
                    secret = document.getElementById("aliyunSecret").value;

                    break
                case dnspodType:
                    id = document.getElementById("dnspodAccount").value
                    secret = document.getElementById("dnspodSecret").value
                    break
                case huaweiType:
                    id = document.getElementById("huaweiAccount").value
                    secret = document.getElementById("huaweiSecret").value
                    break
                case cloudflareType:
                    secret = document.getElementById("cloudflareSecret").value
                    break
            }
            let data = {
                "id": id ? (idIsHide(id, selectDnsProviderType) ? id : encryptRSA(id)) : encryptRSA(""),
                "secret": secret ? (secretIsHide(secret, selectDnsProviderType) ? secret : encryptRSA(secret)) : encryptRSA(""),
                "dnsProviderType": selectDnsProviderType,
                "ipv4Config": ipv4Config,
                "ipv6Config": ipv6Config
            }
            axiosInstance.post("/api/store/dns/config", data)
                .then(res => {
                    confirm.show("Successfully saved!", function () {
                        window.location.reload()
                    })
                })
        }

        function findDnsRecords(e) {
            let evt = window.event || e;
            if (evt.keyCode === 13) {
                let inputDomain = document.getElementById("inputDomain");
                if (inputDomain.value !== "") {
                    //回车事件
                    let param = "dnsProviderType=" + selectDnsProviderType + "&domain=" + inputDomain.value + "&dnsRecordType=" + selectDnsRecordType
                    findDnsRecordsRequest(param)
                } else {
                    confirm.show("输入域名不能为空")
                }
            }
        }

        function clearTable() {
            $("#inputDomain").val("")
            $("#tbMain").empty()
        }

        function encryptRSA(txt) {
            const publicKey = [[${rsaPublicKey}]]
            const encrypt = new JSEncrypt()
            // 设置公钥
            encrypt.setPublicKey(publicKey)
            // 对需要加密的数据进行加密
            return encrypt.encrypt(txt)
        }

        function selectIpv4ForApi() {
            document.getElementById("ipv4_netInterface_select").hidden = true
            document.getElementById("ipv4ApiInputDiv").hidden = false
        }

        function selectIpv4vForNetwork() {
            document.getElementById("ipv4_netInterface_select").hidden = false
            document.getElementById("ipv4ApiInputDiv").hidden = true
            var selectIpv4List = document.getElementById("selectIpv4Value");
            let networkIpv4List = [[${ipv4}]]
            if (networkIpv4List.length !== 0) {
                document.getElementById("selectIpv4Value").options.length = 0
                for (let i = 0; i < networkIpv4List.length; i++) {
                    let selected
                    for (let j = 0; j < dnsConfigList.length; j++) {
                        if (dnsConfigList[j].dnsProviderType == selectDnsProviderType) {
                            selected = dnsConfigList[j].ipv4Config.card
                        }
                    }
                    if (selected == networkIpv4List[i].substring(0, networkIpv4List[i].indexOf('('))) {
                        $("#selectIpv4Value").append("<option selected value=" + networkIpv4List[i] + ">" + networkIpv4List[i] + "</option>")
                    } else {
                        $("#selectIpv4Value").append("<option value=" + networkIpv4List[i] + ">" + networkIpv4List[i] + "</option>")
                    }
                }
            } else {
                $("#ipv4_netInterface_select").html("<span style='color: red'>没有找到可用的网卡</span>")
            }
        }

        function selectIpv6ForApi() {
            document.getElementById("ipv6_netInterface_select").hidden = true
            document.getElementById("ipv6ApiInputDiv").hidden = false
        }

        function selectIpv6ForNetwork(value) {
            document.getElementById("ipv6_netInterface_select").hidden = false
            document.getElementById("ipv6ApiInputDiv").hidden = true
            var selectIpv6List = document.getElementById("selectIpv6Value");
            let networkIpv6List = [[${ipv6}]]
            if (networkIpv6List.length !== 0) {
                document.getElementById("selectIpv6Value").options.length = 0
                for (let i = 0; i < networkIpv6List.length; i++) {
                    let selected
                    for (let j = 0; j < dnsConfigList.length; j++) {
                        if (dnsConfigList[j].dnsProviderType == selectDnsProviderType) {
                            selected = dnsConfigList[j].ipv6Config.card
                        }
                    }
                    if (selected == networkIpv6List[i].substring(0, networkIpv6List[i].indexOf('('))) {
                        $("#selectIpv6Value").append("<option selected value=" + networkIpv6List[i] + ">" + networkIpv6List[i] + "</option>")
                    } else {
                        $("#selectIpv6Value").append("<option value=" + networkIpv6List[i] + ">" + networkIpv6List[i] + "</option>")
                    }
                }
            } else {
                $("#ipv6_netInterface_select").html("<span style='color: red'>没有找到可用的网卡</span>")
            }
        }

        function findDnsRecordsRequest(param) {
            if (param !== undefined && param !== "") {
                axiosInstance.post('/api/dns/record/list?' + param)
                    .then(function (response) {
                        setTable(response.data.data)
                    })
            }
        }

        function setTable(data) {
            $("#tbMain").empty()
            const tbody = document.getElementById('tbMain')
            if (data instanceof Array) {
                for (let i = 0; i < data.length; i++) { //遍历一下json数据
                    const trow = getDataRow(data[i]) //定义一个方法,返回tr数据
                    tbody.appendChild(trow);
                }
            } else {
                confirm.show("No record")
            }
        }

        function getDataRow(h) {
            //创建行
            const row = document.createElement('tr')

            //创建第零列记录ID
            let recordIdCell = document.createElement('td')
            recordIdCell.innerHTML = h.id
            row.appendChild(recordIdCell)

            //创建第一列域名
            const domainNameCell = document.createElement('td')
            domainNameCell.innerHTML = h.domain
            row.appendChild(domainNameCell)

            //创建第二列记录
            let rrCell = document.createElement('td')
            rrCell.innerHTML = h.rr
            row.appendChild(rrCell)

            //创建第三列指向IP
            let ipCell = document.createElement('td')
            ipCell.innerHTML = h.value
            row.appendChild(ipCell)

            //到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮
            const delCell = document.createElement('td')//创建第四列，操作列
            row.appendChild(delCell)
            const btnDel = document.createElement('input')
            btnDel.setAttribute('type', 'button')
            btnDel.setAttribute('value', '删除')
            btnDel.setAttribute('class', 'btn btn-outline-danger')

            //删除操作
            btnDel.onclick = function () {
                let tr = this.parentNode.parentNode;
                let id = tr.childNodes[0].innerHTML
                let domain = tr.childNodes[1].innerHTML
                const TR = tr
                axiosInstance.delete("/api/dns/record?recordId=" + id + "&domain=" + domain + "&dnsProviderType=" + selectDnsProviderType)
                    .then(res => {
                        if (res.data.data == true) {
                            confirm.show("successfully deleted")
                            document.getElementById("tbMain").removeChild(TR)
                        } else {
                            confirm.show("failed to delete")
                        }
                    })
            }
            //把删除按钮加入td，别忘了
            delCell.appendChild(btnDel);
            //返回tr数据
            return row;
        }

        function setSecureConfig() {
            let secureConfig = [[${secureConfig}]]
            document.getElementById("notAllowWanAccess").checked = secureConfig ? secureConfig.notAllowWanAccess : true
            document.getElementById("username").value = secureConfig ? secureConfig.username : ""
            document.getElementById("password").value = secureConfig ? secureConfig.password : ""
        }

        function setAliyunType() {
            selectDnsProviderType = aliyunType;
            document.getElementById("aliyunAccount").value = ""
            document.getElementById("aliyunSecret").value = ""
            clearForm()
            setDnsConfig()
        }

        function setDnspodType() {
            selectDnsProviderType = dnspodType
            document.getElementById("dnspodAccount").value = ""
            document.getElementById("dnspodSecret").value = ""
            clearForm()
            setDnsConfig()
        }

        function setCloudflareType() {
            selectDnsProviderType = cloudflareType
            document.getElementById("cloudflareSecret").value = ""
            clearForm()
            setDnsConfig()
        }

        function setHuaweiType() {
            selectDnsProviderType = huaweiType
            document.getElementById("huaweiAccount").value = ""
            document.getElementById("huaweiSecret").value = ""
            clearForm()
            setDnsConfig()
        }

        function clearForm() {
            document.getElementById("ipv4Enable").checked = false
            document.getElementById("ipv6Enable").checked = false
            document.getElementById("ipv6Radios1").checked = true
            document.getElementById("ipv6Radios2").checked = false
            document.getElementById("ipv4Radios1").checked = true
            document.getElementById("ipv4Radios2").checked = false
            document.getElementById("ipv4ApiInput").value = ""
            document.getElementById("ipv4_domains").value = ""
            document.getElementById("ipv6ApiInput").value = ""
            document.getElementById("ipv6_domains").value = ""
            this.clearTable()
        }

        function isHide(str, provider) {
            for (let i = 0; i < dnsConfigList.length; i++) {
                var config = dnsConfigList[i];
                if (config.dnsProviderType == provider) {
                    console.log(config)
                    return true
                }
            }
            return false
        }

        function idIsHide(id, provider) {
            for (let i = 0; i < dnsConfigList.length; i++) {
                var config = dnsConfigList[i];
                if (config.dnsProviderType == provider) {
                    return config.id == id;
                }
            }
            return false
        }

        function secretIsHide(secret, provider) {
            for (let i = 0; i < dnsConfigList.length; i++) {
                var config = dnsConfigList[i];
                if (config.dnsProviderType == provider) {
                    return config.secret == secret;
                }
            }
            return false
        }

        /**
         * 确认框
         */
        const confirm = {
            /**
             * 显示提示框
             * @param message
             */
            show: function (message, callback) {
                const html = `<form class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
                     <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                     <div class="modal-body">${message}</div>
                        <div class="modal-footer" align="center">
                        <button type="submit" class="btn btn-primary" style="display:block;margin:0 auto" data-dismiss="modal">确定</button>
                     </div>
                     </div>
                     </div>
                     </form>`;
                $(document.body).append(html);
                $('#confirmModal').modal('show').on('hide.bs.modal', function () {
                    if (typeof callback === 'function') {
                        $(this).remove();
                        callback();
                    } else {
                        $(this).remove();
                    }
                })
            },
            /**
             * 移除提示框
             */
            remove: function () {
                $('#confirmModal').modal('hide');
            }
        };

        function initLogSockJs() {
            var container = $('#logs')
            sock.onmessage = function (res) {
                var json = JSON.parse(res.data);
                if (json instanceof Array) {
                    for (let i = 0; i < json.length; i++) {
                        let data = json[i]
                        let status = data.logStatus
                        let content = data.content
                        let timestamp = data.timestamp
                        let html = '<a  class="list-group-item list-group-item-action">'
                            + '<div class="d-flex w-100 justify-content-between">'
                            + '<h6 class="mb-1">' + '状态：' + status + '</h6>'
                            + '<small>' + getDate(timestamp) + '</small>'
                            + '</div>'
                            + '<p class="mb-1">' + content + '</p>'
                            + '</a>'
                        container.append(html)
                    }
                } else {
                    let content = json.content
                    let status = json.logStatus
                    let timestamp = json.timestamp
                    let html = '<a  class="list-group-item list-group-item-action">'
                        + '<div class="d-flex w-100 justify-content-between">'
                        + '<h6 class="mb-1">' + '状态：' + status + '</h6>'
                        + '<small>' + getDate(timestamp) + '</small>'
                        + '</div>'
                        + '<p class="mb-1">' + content + '</p>'
                        + '</a>'
                    container.append(html)
                }
            };

            sock.onclose = function () {
                sock.close()
            };
            sock.onopen = function () {
                sock.send('ALIYUN');
            };
        }


        function getLogs(providerType) {
            document.getElementById("logs").innerHTML = ''
            selectLogType = providerType
            sock.send(providerType)
        }


        function getDate(timestamp) {
            var date = new Date(timestamp);
            var year = date.getFullYear(),
                month = date.getMonth() + 1,//月份是从0开始的
                day = date.getDate(),
                hour = date.getHours(),
                min = date.getMinutes(),
                sec = date.getSeconds();
            var newTime = year + '-' +
                month + '-' +
                day + ' ' +
                hour + ':' +
                min + ':' +
                sec;
            return newTime;
        }

</script>
</body>
</html>
